<template>
    <div class="express">
        <div class="express-head">
            <img :src="expressStation['iconUrl56x56']" alt="">
            <div class="express-company">
                <span>{{expressStation['companyName']}}</span>
                <span>运单号：{{$route.params.expressId}}</span>
                <span>官方电话：{{expressStation['serviceTel']}}</span>
            </div>
        </div>
        <div class="express-list">
            <div class="list-detail" v-for="(item,index) in expressList" :key="index">
                <div class="detail">
                    <div class="left-date">
                        <span>{{item.date}}</span>
                    </div>
                    <div class="circle"></div>
                    <div class="right-flow">
                        <span>{{item.message}}</span>
                    </div>
                </div>
                <div class="time">
                    <span>{{item.getTime}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'express',
    data(){
        return {
            expressList:[],
            expressStation:{}
        }
    },
    methods:{
        getExpressMsg(){
            let that = this;
            let token = localStorage.getItem('token');
            console.log(that.$route);
            let id = that.$route.query.expressId;
            console.log(id);
            that.$ajax(that, 'get', that.$api.orderExpress+id, null, token, function(res){
                console.log(res);
                if(res.data['error_code'] == 0){
                    let temRes = res.data.msg;
                    console.log(temRes);
                    that.expressList = temRes.transitList.reverse();
                    that.expressList.forEach((item,index) => {
                        let temArr = item.time.split(' ');
                        item.date = temArr[0];
                        item.getTime = temArr[1];
                    })
                    console.log(that.expressList);
                    that.expressStation = temRes.cpCompanyInfo;
                }else{
                    that.toast(res.data['msg']);
                }
            })
        }
    },
    mounted(){
        this.$store.state.tab = '物流进度';
        // console.log(this.$route);
        this.getExpressMsg();
    },
    activated(){
        this.$store.state.tab = '物流进度';
        this.getExpressMsg();
    }
}
</script>

<style lang='less'>
@rem:100rem;

.express{
    width: 750/@rem;
    margin-top: 88/@rem;
    .express-head{
        height: 166/@rem;
        width: 100%;
        box-sizing: border-box;
        padding: 0 40/@rem;
        display: flex;
        align-items: center;
        background: #ffffff;
        .express-company{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 20/@rem;
            color: #333;
            span:nth-of-type(2),span:nth-of-type(3){
                font-size: 22/@rem;
                margin-top: 6/@rem;
            }
        }
    }
    .express-list{
        width: 100%;
        background: #ffffff;
        margin-top: 16/@rem;
        padding-bottom: 30/@rem;
        .list-detail{
            width: 100%;
            padding: 20/@rem 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .detail{
                width: 100%;
                box-sizing: border-box;
                padding: 0 20/@rem;
                display: flex;
                align-items: center;
                color: #868686;
                .left-date{
                    width: 200/@rem;
                    text-align: start;
                }
                .circle{
                    height: 16/@rem;
                    width: 16/@rem;
                    border-radius: 50%;
                    background-color: #dddddd;
                }
                .right-flow{
                    margin-left: 30/@rem;
                    width: 520/@rem;
                    text-align: start;
                }
            }
            .time{
                width: 100%;
                padding: 0 20/@rem;
                display: flex;
                justify-content: flex-start;
                color: #868686;
            }
        }
        .list-detail:first-child{
            span{
                color: #333333;
            }
            .circle{
                background: #f85600;
            }
        }
    }
}
</style>
